
@import './variable.scss';
// reset
*{margin:0;padding:0;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video{margin: 0;padding: 0;border: 0;font-size: 14px;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section{display: block;}
body{line-height: 1;}
ol, ul{list-style: none;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after{content: '';content: none;}
b,strong{font-weight:bold;}
table{border-collapse: collapse;border-spacing: 0;}

/*浏览器输入框的默认样式统一*/
input,button,select,textarea{border:none;box-shadow:none;background:none;outline:none;font-size:15px;font-family:"Microsoft YaHei","PingFang SC","Lantinghei SC",arial,"\5b8b\4f53",sans-serif,tahoma;}  
input,button{-webkit-appearance: none;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

a,a:link,a:active,a:hover,a:visited,a:focus{color:#333;text-decoration:none;display:block;}
a:hover{color:$blue;text-decoration:none;}
span{display:inline-block;}
img{outline-width:0;vertical-align:top;}
html,body{height:100%;min-height:100%;background:$bg;font-size:15px;color:#0a0a0a;}
body *{text-decoration:none;font-family:"Microsoft YaHei","PingFang SC","Lantinghei SC",arial,"\5b8b\4f53",sans-serif,tahoma;}

input[type="text"] {-webkit-appearance: none;}
textarea{-webkit-appearance: none;}

// placeholder
// ::-webkit-input-placeholder {color: #D8D8D8;}
// :-moz-placeholder {color: #D8D8D8;}
// ::-moz-placeholder {color: #D8D8D8;}
// :-ms-input-placeholder {color: #D8D8D8;}

// 清除浮动
.clearfix:after{content:"";height:0px;display:block;visibility:hidden;clear:both;}
.fl{float:left;}
.fr{float:right;}

.font-{
    &12{font-size:12px;}
    &14{font-size:14px;}
    &16{font-size:16px;}
    &18{font-size:18px;}
    &21{font-size:21px;}
}
// 文本方向
.align-left{text-align:left;}
.align-center{text-align:center;}
.align-right{text-align:right;}

// 常用间距
.padding-xs{padding: 8px 16px;}
.padding-sm{padding: 16px 24px;}
.padding-md{padding: 24px 32px;}

// 线
.line-solid-top{border-top:1px solid #ddd;}
.line-dashed-top{border-top:1px dashed #ddd;}

// 手势
.cursor{cursor:pointer;
    &:hover{text-decoration: underline;}
}

// 文本省略
.txt-ellipsis{overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
// 取消文本省略
.no-ellipsis{text-overflow:inherit;white-space: normal;}
.ellipsis{
    &-1{
        overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
    }
    &-2{
        overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
    }
}

// flex布局
.flex{
    &-block{display:flex; align-items: center;}
    &-between{display:flex;justify-content: space-between; align-items: center;}
}   

.ul-list{
    li{
        display:flex;
        &+li{padding-top:15px;}
        label{color:#A3A3A3;margin-right:10px;}
        span{flex:1;color:#0A0A0A;}
    }
}



.line{
    position:relative;
    &:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:$line;transform: scaleY(0.5);}
    
    &-all{ position:relative;
        &::after{
            position: absolute;box-sizing: border-box;content: ' ';pointer-events: none; top: -50%;right: -50%;bottom: -50%;left: -50%;border: 1px solid $line;transform: scale(0.5);
        } 
    }  
    &-top{ position:relative;
        &::after{
            position: absolute;box-sizing: border-box;content: ' ';pointer-events: none; top: -50%;right: -50%;bottom: -50%;left: -50%;border-top: 1px solid $line;transform: scale(0.5);
        } 
    } 
    &-bottom{ position:relative;
        &::after{
            position: absolute;box-sizing: border-box;content: ' ';pointer-events: none; top: -50%;right: -50%;bottom: -50%;left: -50%;border-bottom: 1px solid $line;transform: scale(0.5);
        } 
    }
    &-left{ position:relative;
        &::after{
            position: absolute;box-sizing: border-box;content: ' ';pointer-events: none; top: -50%;right: -50%;bottom: -50%;left: -50%;border-left: 1px solid $line;transform: scale(0.5);
        } 
    }
    &-right{ position:relative;
        &::after{
            position: absolute;box-sizing: border-box;content: ' ';pointer-events: none; top: -50%;right: -50%;bottom: -50%;left: -50%;border-right: 1px solid $line;transform: scale(0.5);
        } 
    }
}

.van-popup{
    .popup-hd{
        @extend .flex-block;padding:15px;
        .title{flex:1;font-size:17px;font-weight:bold;}
    }
}

.cell-radio{
    .van-cell{align-items: center;}
    .van-radio{margin-right:10px;}
}

.no-navbar{
    .van-nav-bar{display:none;}
    .popup-title{padding:15px 0;font-size:17px;text-align:center;}
}

.area-input{
    .van-cell{padding-right:0;}
}

.default-input{
    @extend .line-all;padding:5px 10px;border:1px solid $line;border-radius:8px;box-sizing: border-box;
}

.popup-dialog{
    width:90%;border-radius:16px;
    .hd{
        padding:15px;text-align:center;
        h3{font-size:16px;line-height:24px;font-weight:normal;}
    }
    .bd{
        margin:5px 15px 30px 15px;
        .default-input{display:block;width:100%;text-align:center;}
    }
    .ft{
        @extend .flex-block;@extend .line-top;
        .van-button{
            flex:1;height: 48px;margin: 0;border: 0;font-size:16px;
            &:last-child{color:$blue;
                @extend .line-left;
            }
        }
    }
    
}


.fly-card{ // 左右布局
    &+.fly-card{border-top:1px solid $line;}
    .item{display:flex;background:#fff;padding:15px;position:relative;}
    .thumb{width:80px;height:80px;overflow:hidden;
        image{width:100%;height:100%;}
    }
    .content{flex:1;margin-left:15px;
        &:after{content:'';position:absolute;left:15px;bottom:0;width:calc(100% - 30px);height:1px;background:$line;transform: scaleY(0.5);}
        .title{font-size:16px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
        .desc{color:$grey;font-size:12px;padding-top:10px;}
    }
    &.no-border{
        .content{
            &:after{display:none;}
        }
    }
}

.fly-cell{
    display:flex;justify-content: space-between;align-items: center;background:#fff;padding:0 15px;
    .thumb{
        width: 45px;
        image{width:20px;height:20px;float:left;}
    }
    .content{
        flex:1;display: flex;justify-content: space-between;align-items:center;border-bottom:1px solid $line;padding: 15px 0;line-height:20px;
    }
    .value{
        text-align:right; flex:1;
    }
    .title{
        font-size:$ft-17;margin-right:15px;max-width:70%;
    }
    .arrow{
        background:none;
        .iconfont{font-size:$ft-17;color:#ddd;}
        image{width:24px;height:24px;}
    }
    .iconfont{color:#999;}
}

.fly-panel{ // 上中下布局
    background:#fff;margin-bottom:12px;border-radius:8px;
    .hd{
        display:flex;align-items: top;padding:15px;@extend .line;line-height:20px;
        .title{flex:1;width: calc(100% - 100px);font-size:$ft-17;font-weight:bold;}
        .value{text-align:right;width: 100px;font-size:$ft-13;color:$grey;}
    }
    .bd{
        display:flex;flex:1;padding:15px;
    }
    
    .ft{
        padding:10px 15px;text-align:right;@extend .line-top;

    }
}

.bd-li{display:flex;justify-content: flex-start;line-height:24px;font-size:13px;
    .li-label{color:#999;margin-right:10px;}
    .li-p{color:#333;flex:1}
}

.ul-li{
    .li{
        position:relative;padding:5px 15px 5px 20px;color:#666;
        &:before{content:"";position:absolute;top:13px;left:10px;width:5px;height:5px;overflow:hidden;border-radius:50%;background:$blue;}
    }
}

.no-data{
    text-align:center;
}